<template>
	<div class="watermarkConfig-container">
		<el-dialog
			title="录像文件水印配置"
			:visible.sync="showWatermarkConfig"
			width="520px"
			:show-close="false"
			custom-class="watermarkDialog-content"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
		>
			<div class="content">
				<div class="left-image">
					<div class="upload">
						<el-upload
							class="avatar-uploader"
							:action="`${uploadUrl}/ivcs/api/v1/upload`"
							:headers="headers"
							:show-file-list="false"
							:on-success="uploadSuccess"
							:before-upload="beforeUpload"
							:on-remove="handleRemove"
							accept=".jpg,.png"
						>
							<img v-if="imageUrl" :src="imageUrl" class="imgCenter" :style="imgHeight > 1000 ? ' width: 70px;height:100px' : ''" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<span @click="handleRemove" class="del-btn" v-show="imageUrl">x</span>
					</div>
					<div class="text-conent">
						<span class="size">水印展示大小：</span>
						<div style="margin-top: 5px">
							<span class="size">0.1倍</span>
							<el-slider v-model="slider" :min="0.1" :max="10" :step="0.1" :disabled="!imageUrl ? true : false"></el-slider>
							<span class="size10">10倍</span>
						</div>
						<!-- <p> 比例尺：{{ slider }} </p>
						<p> 图片宽：{{ imgposW }} </p> -->
					</div>
				</div>
				<div class="right">
					<div class="black-box" :class="{ padding: !isShowSwitch }">
						<div class="sixteen-ninet" v-show="!isShowSwitch">
							<img class="watermarkConfig" src="@/assets/img/watermarkConfig.png" alt="" />
						</div>
						<div class="four-three" v-show="isShowSwitch">
							<img class="watermarkConfig" src="@/assets/img/watermarkConfig.png" alt="" />
						</div>
						<!-- <img class="watermarkConfig" src="@/assets/img/watermarkConfig.png" alt="" /> imgpos-->
						<img :src="imageUrl" alt="" :style="{ width: imgposW + 'px' }" class="imgpos" :class="[positionRadio]" />
					</div>
					<div style="margin-top: 15px">
						<span class="size">效果框展示比例：</span>
						<span class="size">16 :9 </span>
						<!-- active-color="#6384fe" inactive-color="#6384fe" -->
						<el-switch v-model="isShowSwitch" @change="switchPreview" active-color="#6384fe" inactive-color="#6384fe" style="width: 30px; margin: -4px 5px 0 6px"> </el-switch>
						<span class="size">4 :3 </span>
					</div>
					<div class="radio">
						<span>请选择水印位置:</span>
						<div style="margin-top: 12px">
							<el-radio-group v-model="positionRadio" @change="changeRadio">
								<div style="margin-bottom: 10px">
									<el-radio label="nw">左上方</el-radio>
									<el-radio label="n">正上方</el-radio>
									<el-radio label="ne">右上方</el-radio>
								</div>
								<div>
									<el-radio label="sw">左下方</el-radio>
									<el-radio label="s">正下方</el-radio>
									<el-radio label="se">右下方</el-radio>
								</div>
							</el-radio-group>
						</div>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelWatermark">取 消</el-button>
				<el-button type="primary" @click="saveWatermark" style="background: #6384fe">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { appendToken, removeToken } from '@/utils/tool';
export default {
	name: '',
	components: {},
	props: {
		showWatermarkConfig: {
			type: Boolean,
			required: true,
			default: () => false
		},
		waterMarkData: {
			type: Object,
			required: true,
			default: () => {}
		}
	},
	data() {
		return {
			isShowSwitch: true,
			positionRadio: this.waterMarkData.position,
			imageUrl: this.waterMarkData.watermark,
			uploadUrl: loginUrl,
			headers: {
				'x-access-token': localStorage.getItem(`zco_admin_token_${window.uid}`)
			},
			slider: this.waterMarkData.scale,
			imgWidth: this.waterMarkData.width,
			imgHeight: this.waterMarkData.height
		};
	},
	watch: {
		preview(val) {
			// eslint-disable-next-line radix
			console.log(parseInt(val.imgposW), parseInt(val.imgposH));
		}
	},
	computed: {
		imgposW() {
			const { slider } = this;
			// console.log('slider', slider);1280/219
			// return slider * (70 * 0.571) * (640 / 167);  设计稿70px 70 * 0.571 =39 转rem显示

			if (this.isShowSwitch) {
				//  4 :3  的分辨率  640 * 480；  167 ：表示 div盒子的宽度
				return slider * this.imgWidth * (167 / 640);
			}
			//  16 :9   的分辨率  1280 * 720  219 ：表示 div盒子的宽度
			return slider * this.imgWidth * (219 / 1280);
		},
		// 计算上传图片的比例，得出实际宽 高
		preview() {
			const { imgposW, imgWidth, imgHeight } = this;
			const imgposH = Number(imgposW / (imgWidth / imgHeight));
			console.log(imgposW, imgposH);
			return {
				imgposW,
				imgposH
			};
		}
	},
	mounted() {
		console.log(this.waterMarkData);
		this.positionRadio = this.waterMarkData && this.waterMarkData.position ? this.waterMarkData.position : 'nw';
	},
	methods: {
		cancelWatermark() {
			this.$emit('cancelWatermark');
		},
		saveWatermark() {
			if (!this.imageUrl) {
				this.$message.error('当前未配置图片水印，请检查后重新保存');
				return;
			}
			/* 	side: 1, // 展示端：0-不做展示, 1-访客端, 2-座席端, 3-访客端和座席端都展示
				watermark: '', // 水印地址
				scale: 0.1, // 缩放比例：1.0
				position: '', // 位置：nw-左上方, n-上方, ne-右上方, sw-左下方, s-下方， se-右下方
				width: '', 上传图片的宽
				height: ''  上传图片的高 this.imgHeight
			*/
			let value = { value: { watermark: removeToken(this.imageUrl), scale: this.slider, width: this.imgWidth, height: this.imgHeight, position: this.positionRadio } };

			this.$emit('saveWatermark', value);
		},
		changeRadio() {
			this.position = this.positionRadio;
		},
		switchPreview() {},
		beforeUpload(file) {
			const isJpg = file.type === 'image/jpeg';
			const isPng = file.type === 'image/png';
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!(isJpg || isPng)) {
				this.$message.error('上传水印图片只能是 JPG 或 PNG 格式!');
			} else if (!isLt2M) {
				// this.$message.error('上传水印图片大小不能超过 2MB!');
			}
			return (isJpg || isPng) && isLt2M;
		},
		uploadSuccess(file) {
			console.log(file);
			if (file.code === 200) {
				this.imageUrl = appendToken(file.data.url);
				this.slider = 1;

				// 上传图片后获取图片的宽高
				let img = new Image();
				img.src = this.imageUrl;
				img.onload = () => {
					const { width, height } = img;
					this.imgWidth = width;
					this.imgHeight = height;
					console.log('width:' + img.width + ',height:' + img.height);
				};
			} else {
				this.$message.error('上传水印失败');
				this.imageUrl = '';
			}
		},
		handleRemove(file) {
			console.log(file);
			this.imageUrl = '';
		}
	}
};
</script>

<style scoped lang="less">
.watermarkConfig-container .content {
	margin-top: -8px;
	display: flex;
	justify-content: space-between;
	.left-image {
		.upload {
			width: 120px;
			height: 120px;
			background: #f4f4f4;
			border: 1px solid #ededed;
			border-radius: 4px;
			position: relative;
			.avatar-uploader .el-upload {
				border: 1px solid #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}
			// .avatar-uploader .el-upload:hover {
			// 	border-color: #409eff;
			// }
			.avatar-uploader-icon {
				text-align: center;
				line-height: 25px;
			}
			.el-icon-plus {
				width: 28px;
				height: 28px;
				background: #f4f4f4;
				border: 1px solid #969a9f;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			.avatar {
				width: 120px;
				height: 120px;
				display: block;
			}
			.imgCenter {
				// width: 57px;
				width: 115px;
				// height: 115px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 0;
			}
			.del-btn {
				position: absolute;
				top: 0px;
				left: 105px;
				width: 14px;
				height: 14px;
				background: #000000;
				opacity: 0.36;
				border-radius: 50%;
				color: #fff;
				text-align: center;
				line-height: 15px;
				z-index: 100;
				cursor: pointer;
			}
		}
		.text-conent {
			margin-top: 18px;
			.size {
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #888888;
			}
			.size10 {
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #888888;
				position: relative;
				top: -23px;
				left: 145px;
			}
		}
	}

	.right {
		// margin-left: 170px;
		.black-box {
			position: relative;
			background-color: #000000;
			display: inline-block;
			overflow: hidden;
			border-radius: 6px;
			.mediaStream {
				width: 290px;
				height: 152px;
				overflow: hidden;
				border-radius: 6px;
			}
			.sixteen-ninet {
				padding: 0 36px;
			}
			.four-three {
				padding: 0 3px;
			}
			.sixteen-ninet,
			.four-three {
				background-color: #000000;
			}
			img.watermarkConfig {
				width: 188px;
			}
			.imgpos {
				width: 48px;
				position: absolute;
			}
			.imgpos.nw {
				top: 10px;
				left: 17px;
			}
			.imgpos.n {
				top: 10px;
				left: 50%;
				transform: translateX(-50%);
			}
			.imgpos.ne {
				top: 10px;
				right: 17px;
			}
			.imgpos.sw {
				bottom: 10px;
				left: 17px;
			}
			.imgpos.s {
				bottom: 10px;
				left: 50%;
				transform: translateX(-50%);
			}
			.imgpos.se {
				bottom: 10px;
				right: 17px;
			}
		}
		.black-box.padding {
			// padding: 0 36px;
		}
		.radio {
			margin-top: 20px;
		}
	}
}
</style>
<style lang="less">
.watermarkDialog-content {
	padding: 0;
	.el-dialog__body {
		border-top: 1px solid #eee;
	}
}
.watermarkDialog-content .el-slider .el-slider__runway {
	width: 88px;
	margin: -15px 0 0 50px;
}
.right .el-switch.is-checked .el-switch__core {
	background: #6384fe;
}
.text-conent .el-slider__bar {
	background: #6384fe;
}
</style>
